<template>
  <div class="deviceMetrics">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="指标:">
        <el-select  v-model="formInline.state" placeholder="全部">
          <el-option label="全部" value="4"></el-option>
          <el-option label="在线" value="0"></el-option>
          <el-option label="离线" value="1"></el-option>
          <el-option label="一般报警" value="2"></el-option>
          <el-option label="严重报警" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签:">
        <el-input  placeholder="请输入设备标签" />
      </el-form-item>
      <el-form-item label="设备:">
        <el-input  placeholder="请输入设备id" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-scrollbar height="520px">
      <div style="overflow-x: hidden">
        <el-row :gutter="5" v-show="!(items==null||items.length===0)">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="item in items " :key="item.deviceId">
            <div  :class="['box', calssName(item)]">
              <div class="label" v-if="item.level == 0"><span class="hov">{{ item.online ? '正常' : '离线' }} </span></div>
              <div class="label" v-if="item.level != 0"><span class="hov">{{ item.level == 1 ? '一般报警' : '严重报警' }}</span></div>
              <div class="title">{{ item.deviceId }}</div>
              <div class="content">
                <div class="row" v-for="(it, ind) in item.quotaList" :key="ind" >
                  <div class="col" v-if="ind<2"><span class="key">{{ it.quotaName }}</span> <span class="value">{{ it.value }}{{ it.unit }}</span></div>
                  <div class="col" v-if="ind<2"><span class="key">正常值 &nbsp;</span> <span class="value"> {{ it.referenceValue }} {{ it.unit }}</span></div>
                </div>
              </div>
              <div class="more" @click="openDetailsHandle(item)">...</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
    <el-dialog v-model="DialogVisible" title="设备指标" width="30%" center>
      <div class="dialog-content">
        <div v-for="(it, ind) in itemData.quotaList" class="row" :key="ind">
          <span >{{it.quotaName}} &nbsp;<i style="color:#999" :class="{lab: it.level != 0}"> {{it.value}} {{it.unit}}</i> </span>
          <span style="color:#818693">正常值 &nbsp; {{it.referenceValue}} {{it.unit}} </span>
        </div>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="DialogVisible = false">Cancel</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { device } from '@/api/device'
@Options({})
export default class deviceMetrics extends Vue {
  private formInline: {
    [index:string]:any
  } = {
    state: '4'
  }

  private itemData = {}
  private DialogVisible = false
  private page = 1
  private pageSize = 20
  data: any = null
  items: any = null
  public openDetailsHandle (item:any) :void{
    this.itemData = item
    this.DialogVisible = true
    console.log('kkk')
  }

  // 不同状态（警报、是否在线）的样式切换
  private calssName (item: any):string {
    let itemClass = ''
    if (item.level !== 0) {
      itemClass = item.level === 1 ? 'warning' : ''
    } else if (item.online) {
      itemClass = 'line'
    } else {
      itemClass = 'unline'
    }
    return itemClass
  }

  private async getList () {
    this.data = await device({
      page: this.page,
      pageSize: this.pageSize,
      ...this.formInline
    })

    this.items = this.data.items
  }

  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
.deviceMetrics{
  padding:20px;
}
.box{
  position:relative;
  height: 166px;
  margin: 10px;
  background-color: #F2F2F2;
  border-radius: 11px;
  flex-grow: 2;
  .label{
    //display: flex;
    //justify-content: center;
    //margin: 15px 0;

    position: absolute;
    font-size: 12px;
    color: #fff;
    left: 50%;
    top: 12px;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 5px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #ff5757;
    opacity: 0.76;
    display: flex;
    align-items: center;
    span{
      position: relative;
      display: inline-block;
      width: 40px;
    }
    &::before{
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      background: #ff5757;
      opacity: 0.38;
    }
    &::after{
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 100%;
      background: #ff5757;
      opacity: 0.07;
    }
    .hov{
      &::after{
        position: absolute;
        content: '';
        width: 40px;
        height: 40px;
        box-sizing: content-box;
        border: solid 1px #ff5757;
        left: 50%;
        top: 50%;
        border-radius: 100%;
        z-index: -1;
        transform: translate(-50%, -50%);
        opacity: 0.7;
      }
      @keyframes flower {
        0% {
          border-width: 1;
          opacity: 0.7;
        }
        100%{
          border-width: 10px;
          opacity: 0;
        }
      }
    }
    &:hover .hov{
      &::after{
        animation: flower 1.5s ease 100ms infinite;
      }
    }
  }
  .title{
    padding-top:40px;
    display: flex;
    justify-content: center;
    margin: 15px 0;
  }
  .content{
    //display: flex;
    min-height: 38px;
    .row{
      display: flex;
      justify-content: space-between;
      margin: 10px 5px;
      .key , .value{
        // display: flex;
      }
      .col{
        display:inline-block;
        .key{
          font-size: 14px;
          color: #999;
          //line-height: 27px;
        }
        .value{
          font-size: 12px;
          color: rgb(129, 134, 147);
        }
      }

    }
  }
  .more{
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 0px;
    cursor: pointer;
    color: #5584FF;
    margin: 10px 0;
    align-self: flex-end;
  }

}

.warning{
  .label{
    background: #FFC400;
    &::before{
      background: #FFC400;
    }
    &::after{
      background: #FFC400;
    }
  }
  .info{
    div:first-child{
      i{
        color: #FFC400 !important;
      }
    }
  }

  .hov{
    &::after{
      border-color: #FFC400;
    }
  }
}
.line{
  //background: #ffffff url(./../../assets/images/waterMarkDatainfo2.png) right bottom no-repeat;
  //background-size: 70px 65px;
  .label{
    background: #57CE9E;
    &::before{
      background: #57CE9E;
    }
    &::after{
      background: #57CE9E;
    }
  }
  .info{
    div:first-child{
      i{
        color: #57CE9E !important;
      }
    }
  }
  .hov{
    &::after{
      border-color: transparent;
    }
  }
}
.unline{
  //background: #ffffff url(./../../assets/images/waterMarkDatainfo1.png) right bottom no-repeat;
  //background-size: 70px 65px;
  .label{
    background: #9EAEC5;
    &::before{
      background: #9EAEC5;
    }
    &::after{
      background: #9EAEC5;
    }
  }
  .info{
    div:first-child{
      i{
        color: #9EAEC5 !important;
      }
    }
  }
  .hov{
    &::after{
      border-color: #9EAEC5;
    }
  }
}
.dialog-content{
  padding: 0 80px;
  .row{
    justify-content: space-between;
    display: flex;
    margin: 10px 5px;
    .key{
      display: flex;
    }
    .value{
      display: flex;
    }
  }
}
</style>
